<template>
  <div id="header">
    <div class="block">
        <button  @click="handleClick(k)"
        v-for="(v,k) in choosen" :key="k"
        :class="{'active':v.show===true}"
        >{{v.name}}</button>
       
    </div>
  </div>
</template>
<script scoped>
import Vue from 'vue';
import { Button } from 'element-ui';
import { MessageBox } from 'element-ui';
Vue.use(Button)
export default {
  data() {
    return {
      choosen:[
        {name:'实时动态',show:true},
        {name:'指定时间',show:false},
        {name:'近期趋势',show:false},
        {name:'趋势图',show:false}
        ],
    }
  },
  methods:{
    handleClick(k){
     this.choosen[k].show=!this.choosen[k].show
     this.$emit("btn"+k,this.choosen[k].show)

    },
    unActive(){
      if(this.choosen[0].show){
        this.confirmUnActive();
      }
      this.choosen[0].show=false;
      
      // this.open2()
    },
    confirmUnActive() {
        MessageBox.alert('点击"实时动态"按钮可重新获得实时数据', '功能提示', {
          confirmButtonText: '确定',
        });
    }
    // open2() {
    //     MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }).then(() => {
    //       MessageBox({
    //         type: 'success',
    //         message: '删除成功!'
    //       });
    //     }).catch(() => {
    //       MessageBox({
    //         type: 'info',
    //         message: '已取消删除'
    //       });          
    //     });
      // }
  }
  
}

</script>
<style scoped>
.block {
  padding: 5px;
}
.active{
    background: #11b95c; 
    border-color: #11b95c;
    color:#fff;
    outline: 0;
}
button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c4c4c4;
    color: #1f2d3d;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
}
button+button{
  margin-left: 10px
}
</style>
